
<template>
  <view class="header">
    <u-navbar
      :title="title"
      :background="background"
      :is-back="isBack"
      :back-icon-color="backColor"
      :border-bottom="borderBottom"
      :title-color="textColor"
			:title-bold="titleBold"
			:is-fixed="isFixed"
			@click-left="onClickLeft"
			 @click-right="onClickRight"
    >
		<view class="u-nav-slot" slot="center">
					<image src="../../assets/lx.jpg" mode=""></image>
		</view>
     <!-- <view class="slot-wrap" >
        <view @click="urlInformation" class="information">
          <image src="../../assets/lxr.png"></image>
          <text class="setting-tip" v-if="totalMessageListDataLength!==0">{{totalMessageListDataLength}}</text>
        </view>
        
        <view class="setting">
          <view class="colletion" @click="colletionChange">
          <image src="../../assets/fuwu.png" mode=""></image>
        </view>
        <view class="agreement-tips" @click="settingChange">
          <image src="../../assets/kehu.png" mode=""></image>
        </view>
        </view>
			</view> -->
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: 'header-person',
  props: {
		// 导航栏标题
    title: {
      type: String,
      default: '',
    },
		// 是否返回
    isBack: {
      type: Boolean,
      default: true,
    },
		rightContent: {
			type: String, //右侧字体
			default: '',
		},
		rightIcon: {
			type: String, //右侧图标
			default: '',
		},
		// 左上角返回图标的颜色
		backColor: { //左侧返回箭头的颜色
			type: String,
			default: 'red' 
		},
		// 背景颜色
    background: {
      type: String,
      default: '#ffffff',
    },
    textColor: {
      type: String,
      default: '#012786',
    },
		// 顶部导航栏的下边框
    borderBottom: {
      type: Boolean,
      default: true,
    },
		titleBold: { //标题文字加粗
			type: Boolean,
			default: false
		},
		isFixed: { //头部是否固定
			type: Boolean,
			default: true
		},
		tabbarIndex: {
			type: String,
			default: ''
		},
    totalMessageListDataLength: {
      type: Number
    },
  },
  data() {
    return {
    };
  },
  computed:{
  },
  watch:{
  },
  created() {
  },
  methods: {
		// 返回点击
		onClickLeft() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 右侧按钮点击
		onClickRight() {},
    // 消息跳转事件
    urlInformation:function() {
      uni.navigateTo({
        url:'/subPackagesC/pages/personalcenter/information/myInfo'
      })
    },
    //收藏跳转
    colletionChange(){
      uni.navigateTo({
        url:'/subPackagesE/pages/product/collection'
      })
    },
    // 设置跳转事件
    settingChange:function(){
      uni.navigateTo({
        url:'/subPackagesC/pages/personalcenter/setting/setting'
      })
    }
  },
};
</script>

<style scoped lang='scss' >
.header{  
  width: 100%;
}
::v-deep .u-navbar-inner{
  width: 100%;
}
.setting-tip{
  width: 34upx;
  height: 34upx;
  line-height: 34upx;
  background: #FC3B3B;
  border-radius: 50%;
  font-size:24upx;
  color: #FFFFFF;
  position: absolute;
  margin-left: -15upx;
  margin-top: -10upx;
  text-align: center;
}
.slot-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 30upx;
  .information{
    flex: 1;
  }
  .setting{
    flex:5;
    display:flex;
    justify-content: flex-end;
    align-items: center;
    .agreement-tips{
      margin-left: 26upx;
    }

  }
  image{
    display: inline-block;
    width: 38upx;
    height: 38upx;
  }
}
</style>